<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
  <script src="./jq.js"></script>
</head>
<body>
  <div class="container">
    <button class="btn btn-primary">GET</button>
    <button class="btn btn-danger">POST</button>
    <button class="btn btn-info">通用</button>
  </div>

  <script>
    $('button').eq(0).click(function () {
      $.get('http://127.0.0.1:8000/jq-server', {a:100, b:200}, function(data) {
        // data -> 响应体参数 xhr.response
        console.log(data)
      }, 'json') // 加了json data是对象 不加是字符串
    })

    $('button').eq(1).click(function () {
      $.post('http://127.0.0.1:8000/jq-server', {a:100, b:200}, function(data) {
        // data -> 响应体参数 xhr.response
        console.log(data)
      }, 'json')
    })


    $('button').eq(2).click(function(){
      $.ajax({
        // url
        url: 'http://127.0.0.1:8000/jq-server',
        // 参数
        data: {a:100, b:200},
        // 请求类型
        type: 'GET',
        //响应体结果
        dataType: 'json',
        // 成功的回调
        success: function (data) {
          console.log(data)
        },
        //超时时间
        timeout: 2000,
        // 失败回调
        error: function () {
          console.log('error')
        },
        // 头信息
        headers: {
          c: 300,
          d: 400
        }
      })
    })


  </script>
</body>
</html>